<template>
    <div class="section-wrap">
        <!-- 折叠 -->
        <a-collapse v-model:activeKey="activeKey" :bordered="false" v-if="collapse" @change="handleChange">
            <template #expandIcon="{ isActive }">
                <div style="width: 16px; height: 16px; border-radius: 2px; line-height: 16px; background: rgba(35, 89, 221, 0.23)">
                    <my-icon type="iconbiaotixiala" style="color: #2359dd" :rotate="isActive ? 0 : -90" />
                    <!-- <img :src="" /> -->
                </div>
            </template>
            <a-collapse-panel key="1" :style="customStyle">
                <template #header>
                    <div class="font-w-b" style="font-size: 14px">
                        <span v-if="title">{{ title }}</span>
                        <slot name="title" v-else />
                    </div>
                </template>
                <slot />
                <template #extra>
                    <slot name="titleExtra" />
                </template>

                <!-- <template #[item]="data" v-for="item in Object.keys($slots)">
                    <slot :name="item" v-bind="data || {}"></slot>
                </template> -->
            </a-collapse-panel>
        </a-collapse>
        <!-- 不折叠 -->
        <div class="section-cont" v-else>
            <flexbox align="center" class="section-header">
                <div class="section-header-title">
                    <span v-if="title">
                        {{ title }}
                    </span>
                    <slot name="title" v-else />
                </div>
                <div class="section-header-action">
                    <slot name="titleExtra" />
                </div>
            </flexbox>
            <slot />
        </div>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
    props: {
        title: {
            type: String,
            default: ''
        },
        collapse: {
            type: Boolean,
            default: false
        },
        defaultOpen: {
            type: Boolean,
            default: true
        }
    },
    emits: ['change'],
    setup(props, { emit }) {
        const activeKey = ref(['1']);
        const customStyle = 'background: #fff;overflow: hidden;border:0;font-size: 16px; color: #1f2329;';
        activeKey.value = props.defaultOpen ? ['1'] : ['0'];
        const handleChange = (val) => {
            emit('change', val);
        };
        return { activeKey, customStyle, handleChange };
    }
});
</script>
<style lang="less">
.ant-collapse > .ant-collapse-item > .ant-collapse-header {
    display: flex;
    align-items: center;
    .ant-collapse-extra {
        float: none;
        flex: 1;
    }
}
</style>
<style scoped lang="less">
.section-wrap {
    padding: 12px 24px;
    .section-cont {
        padding: 0 12px;
    }
    .section-header {
        height: 40px;
        margin-bottom: 12px;
        // padding: 24px;
        &-title {
            font-size: 14px;
            color: @title-font-color;
            font-weight: bold;
        }
        &-action {
            flex: 1;
        }
    }
}
</style>